<template>
  <el-scrollbar style="height:500px">
    按钮
    <el-row :gutter="10">
      <el-col :span="17">{{btnInfo.count}}{{btnInfo.moduleId}}
        <nfnumber v-bind="metaTable.btnCount" v-model="btnInfo.count"/>
        <br>
        <el-row :gutter="10">
          <el-col :span="3"> 序号 formMetaId </el-col>
          <el-col :span="3"> 按钮名称 btnTitlte</el-col>
          <el-col :span="3"> 弹窗名称 dialogTitle </el-col>
          <el-col :span="3"> 宽度 width</el-col>
          <el-col :span="4"> 打开组件 controlKey</el-col>
          <el-col :span="4"> 操作方式 optionKind</el-col>
          <el-col :span="3"> 快捷键 hotkey</el-col>
        </el-row>
        <el-row :gutter="20"
          v-for="(item) in modelButtonList"
          :key="'col_' + item.columId"
        >
          <el-col :span="3">
            <nfnumber v-bind="metaColumn.formMetaId" v-model="item.formMetaId"/>
          </el-col>
          <el-col :span="3">
            <nftext v-bind="metaColumn.btnTitlte" v-model="item.btnTitlte"/>
          </el-col>
          <el-col :span="3">
            <nftext v-bind="metaColumn.dialogTitle" v-model="item.dialogTitle"/>
          </el-col>
          <el-col :span="3">
            <nftext v-bind="metaColumn.width" v-model="item.width"/>
          </el-col>
          <el-col :span="4">
            <nftext2 v-bind="metaColumn.controlKey" v-model="item.controlKey"/>
          </el-col>
          <el-col :span="4">
            <nftext2 v-bind="metaColumn.optionKind" v-model="item.optionKind"/>
          </el-col>
          <el-col :span="3">
            <nftext2 v-bind="metaColumn.hotkey" v-model="item.hotkey"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        model：<br>
        "btnOrder": {{Object.keys(modelButtonList)}},
        <el-scrollbar style="height:500px">
          <jsonformat :json="modelButtonList" />
        </el-scrollbar>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import VueDS from 'vue-data-state'
import { webSQLVue } from 'nf-web-storage'

// 表单的 meta
const _metaButton = reactive({
  moduleId: {
    controlId: 10001,
    colName: 'moduleId',
    label: '模块ID',
    controlType: 120,
    defValue: 100,
    placeholder: '模块ID',
    title: '模块ID'
  },
  btnCount: {
    controlId: 10002,
    colName: 'btnCount',
    label: '按钮数量',
    controlType: 120,
    defValue: 4,
    placeholder: '按钮数量',
    title: '按钮数量'
  }
})

// 表单的 meta
const _metaColumn = reactive({
  formMetaId: {
    controlId: 10101,
    colName: 'formMetaId',
    label: '序号',
    controlType: 120,
    defValue: '10',
    placeholder: '序号',
    title: '序号'
  },
  btnTitlte: {
    controlId: 10102,
    colName: 'btnTitlte',
    label: '按钮名称',
    controlType: 101,
    defValue: '添加',
    placeholder: '按钮名称',
    title: '按钮名称'
  },
  dialogTitle: {
    controlId: 10103,
    colName: 'dialogTitle',
    label: '弹窗名称',
    controlType: 101,
    defValue: '弹窗名称',
    placeholder: '弹窗名称',
    title: '弹窗名称'
  },
  width: {
    controlId: 10104,
    colName: 'width',
    label: '宽度',
    controlType: 101,
    defValue: '宽度',
    placeholder: '宽度',
    title: '宽度'
  },
  controlKey: {
    controlId: 10105,
    colName: 'controlKey',
    label: '打开组件',
    controlType: 160,
    defValue: '打开组件',
    placeholder: '打开组件',
    title: '打开组件',
    optionList: [
      { value: 'form', label: 'form' },
      { value: 'list', label: 'list' }
    ]
  },
  optionKind: {
    controlId: 10106,
    colName: 'optionKind',
    label: '操作方式',
    controlType: 160,
    defValue: '操作方式',
    placeholder: '操作方式',
    title: '操作方式',
    optionList: [
      { value: 'add', label: '添加' },
      { value: 'update', label: '修改' },
      { value: 'delete', label: '删除' },
      { value: 'look', label: '查看' }
    ]
  },
  hotkey: {
    controlId: 10107,
    colName: 'hotkey',
    label: '快捷键',
    controlType: 160,
    defValue: '快捷键',
    placeholder: '快捷键',
    title: '快捷键',
    optionList: [
      { value: 'a', label: '添加' },
      { value: 's', label: '修改' },
      { value: 'd', label: '删除' },
      { value: 'f', label: '查看' }
    ]
  }
})

// 获取新的字段
const getNewColumn = (id, colName, cnName, colType) => {
  const _tmp = {
    formMetaId: id,
    btnTitlte: colName,
    dialogTitle: cnName,
    controlKey: colType,
    width: '50%',
    optionKind: 'add',
    hotkey: 'a'
  }
  return _tmp
}

</script>

<script setup>
import elGrid from '/ctrl/nf-el-grid/nf-el-grid-list.vue'
// 组件
import nftext from '/ctrl/nf-el-form-item/el-form-t-text.vue'
import nfarea from '/ctrl/nf-el-form-item/el-form-t-area.vue'
import nftext2 from '/ctrl/nf-el-form-item/el-form-t-autocomplete.vue'
import nfnumber from '/ctrl/nf-el-form-item/el-form-n-number.vue'
import nfselects from '/ctrl/nf-el-form-item/el-form-s-select-cascader.vue'
import jsonformat from '../json-format/json-format.vue'

/**
 * websql 相关
 * * 生成建表的依据，对象
 * * 建立websql里面的表
 */

  // 状态
  const { get } = VueDS.useStore()
  const helpDataBaseMeta = get.helpDataBaseMeta()

  // 表的meta
  const metaTable = _metaButton
  // 字段的meta
  const metaColumn = _metaColumn

  // 按钮的数量
  const btnInfo = reactive({
    count: 4,
    moduleId: 100
  })

  // 按钮的数据
  const modelButtonList = reactive({
    10: {
      formMetaId: 10,
      btnTitlte: '添加',
      dialogTitle: '添加',
      controlKey: 'form',
      width: '50%',
      optionKind: 'add',
      hotkey: 'a'
    },
    11: {
      formMetaId: 11,
      btnTitlte: '修改',
      dialogTitle: '修改',
      controlKey: 'form',
      width: '50%',
      optionKind: 'update',
      hotkey: 's'
    },
    12: {
      formMetaId: 12,
      btnTitlte: '删除',
      dialogTitle: '删除',
      controlKey: 'del',
      width: '50%',
      optionKind: 'add',
      hotkey: 'd'
    },
    13: {
      formMetaId: 13,
      btnTitlte: '查看',
      dialogTitle: '查看',
      controlKey: 'list',
      width: '75%',
      optionKind: 'look',
      hotkey: 'f'
    }
  })

  // 数据库
  const { help } = webSQLVue.useHelp('==db-plat')
  // console.log('help', help)

  // 建立表
  const createTable = () => {
    const table = {}
    for(const key in modelColumList) {
      const col = modelColumList[key]
      table[col.cnName] = ''
    }
    console.log('table', table)
    help.createTable(modelTable.tableName, table)
  }

  // 删除表
  const delTable = () => {
    help.deleteTable(modelTable.tableName)
  }
</script>
